<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>凡客-详情页</title>
		<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/Home/org/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
		<script src="{{__PUBLIC__}}/Home/js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="{{__PUBLIC__}}/Home/org/bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/Home/css/description.css" />
	</head>
	<body>
		{{include file="VIEW_PATH/Common/header.php"}}
		<!--详情部分-->
			<!--选择商品属性-->
		<div id="shopping">
			<div class="title">
				<p>
					<a href="{{U('Index/index')}}">首页 </a> > 
					{{foreach from="$cateData" key="$k" value="$v"}}
					<a href="{{U('List/index',array('cid'=>$v['cid']))}}"> {{$v['cname']}} </a> > 
					{{endforeach}}
					{{$goodsData['gname']}}
				</p>
			</div>
			<div class="middle">
				<h2><p style="float:left;margin-right:10px;">{{$goodsData['gname']}}</p> <span></span></h2>
				<div>
					<a href="">产品描述</a>|
					<a href="">评论</a>|
					<a href="">提问</a>
				</div>
			</div>	
			<div class="main">
				<div class="small">
					<!-- hover改变图片地址 -->
					<script type="text/javascript">
						$(function(){
							// 默认设置
							$('.box_tab li').first().addClass('index');
							var src = $('.box_tab li').first().find('img').attr('src');
							$('.middling .mid_img').attr('src', src);
							$('.middling .big_img').attr('src',src);
							// hover设置
							$('.box_tab li').hover(function(){
								var x = $(this).index();
								$(this).addClass('index').siblings('li').removeClass('index');
								var src = $('.box_tab li').eq(x).find('img').attr('src');
								$('.middling .mid_img').attr('src', src);
								$('.middling .big_img').attr('src',src);
							})
						})
					</script>
					<style type="text/css">
						.box_tab li img{
							width: 66px;
							height: 66px;
						}
					</style>
						<!-- 单击控制ul -->
						<script type="text/javascript">
							$(function(){
								var num = $('.box_tab li').length;
								if (num <= 5) return;
								var x = 0;
								$('.up').click(function(){
									if (x==0) return;
									x--;
									$('.box_tab').animate({'top': -81*x+'px'}, 300);
								})
								$('.down').click(function(){
									if (x==num-5) return;
									x++;
									$('.box_tab').animate({'top': -81*x+'px'}, 300);
								})
							})
						</script>
					<div class="up"></div>
					<div class="box">
						<ul class="box_tab">
							{{foreach from="$goodsData['img']" key="$kimg" value="$vimg"}}
							<li><span><img src="{{$vimg}}" alt=""></span></li>
							{{endforeach}}
						</ul>
					</div>
					
					<div class="down"></div>
				</div>

				<!-- 放大镜 -->
				<script type="text/javascript">
					$(function(){
						$('#cover').mousemove(function(e){
							$('.big').css('display', 'block');
							//获得事件对象
							var ev = window.event || e;
							//获得鼠标的位置
							var mouse_left = ev.offsetX || ev.layerX;
							var mouse_top = ev.offsetY || ev.layerY;
									
							//计算白块的位置
							var box_left = mouse_left-100;
							var box_top = mouse_top-100;
									
							if(box_left<0){
								box_left=0;
							}
							if(box_top<0){
								box_top=0;
							}
							if(box_left>200){
								box_left=200;
							}
							if(box_top>200){
								box_top=200;
							}
							//将值赋值给小白块
							box.style.left = box_left+'px';
							box.style.top = box_top+'px';
									
							//计算右侧大图的位置
							var rpic_left = box_left*-2;
							var rpic_top = box_top*-2;
							//给大图赋值
							$('.big img').css({
								'top': rpic_top+'px',
								'left': rpic_left+'px'
							});
						})
						$('#cover').mouseout(function(event) {
							$('.big').css('display', 'none');
						});
					})
				</script>

				<div class="middling">
					<img src="" class="mid_img" style="width:400px;height:400px;" />
					<div id="box"></div>
					<div id="cover"></div>
					<div class="big">
						<img src="" class="big_img" style="width:800px;height:800px;" />
					</div>
				</div>
				

				<div class="choose">
					<div class="price">
						<p>市场价：<span style="text-decoration:line-through;">￥{{$goodsData['mprice']}}</span> 售价：<span>￥</span><strong>{{$goodsData['sprice']}}</strong></p>
					</div>
					<div class="selectArea">
						<script type="text/javascript">
							$(function(){
								// 判断是否发送异步
								var num = $('.color').length;

								// 判断价格
								var price = $('.price p strong').text();
								var newprice = 0;

								$('.color_tab li').click(function(){
									// <!-- tab切换 -->
									$(this).addClass('index').siblings('li').removeClass('index');
									$(this).parents('.color').find('.shop_tips').css('display', 'none');;

									// 判断价格
									var x = 0;
									$.each($('.color .index'), function(k, v) {
										x = x + parseInt($(this).find('p').attr('addprice'));
									});
									newprice = x + parseInt(price);
									$('.price p strong').html(newprice);

									// 异步
									var remote = {'gid':'','combine':''};
									$.each($('.color .index'), function(k, v) {
										remote.combine += $(this).find('p').attr('gaid')+'|';
										remote.gid = $(this).find('p').attr('gid');
									});

									if($('.color .index').length!=num) return;
									// 异步 类型
									$.ajax({
										url: '{{U('ajaxType')}}',
										type: 'POST',
										dataType: 'json',
										data: {remote: remote},
										success:function(arr){
											// console.log(arr);
											// 判断库存是否为空
											if(!arr){
												$('.s_size').html('');
												$('.s_total').html('抱歉！该货品已售空！');
												$('.shoppingBuy').css('display', 'none');
											}else{
												if(parseInt(arr.glstock)<=10){
													// 库存紧张
													$('.s_total').html('库存紧张');
													var tr = '';
													for (var i = 1; i <= parseInt(arr.glstock); i++) {
														tr += '<option value="'+i+'">'+i+'</option>'
													};
													// alert(tr);
													$('.num select').html(tr);
												}else{
													// 库存充足
													$('.s_total').html('现在有货');
													var tr = '';
													for (var i = 1; i <= 10; i++) {
														tr += '<option value="'+i+'">'+i+'</option>'
													};
													$('.num select').html(tr);
												}
												// 购买框是否显示
												$('#hide_glid').html('<input type="hidden" name="glid" value="'+arr.glid+'">');
												$('.s_size').html(arr.glstock);
												$('.shoppingBuy').css('display', 'block');
											}
										}
									})
								})
								
								$('.color').first().find('.color_tab li .bg').prepend('<span></span>');
								$('.color').first().find('.color_tab li').first().addClass('index');

								// 获取货品标题 颜色  默认
								var color = $('.color').first().find('p').eq(0).text();
								$('#shopping .middle h2 span').html(color);
								$('#shopping .select .s_color').html(color);

								// 单击事件后   标题
								$('.color').first().find('li').click(function() {
									var color = $(this).find('p').text();
									$('#shopping .middle h2 span').html(color);
								});

								// 单击事件 颜色 尺寸 select
								$('.color li').click(function() {
									var size = '';
									$.each(($('.color .index')), function(k, v) {
										 size += $(this).find('p').text()+"&nbsp;";
									});
									$('#shopping .select .s_color').html(size);
								});

							})
						</script>
						{{foreach from="$typeData" key="$k" value="$v"}}
						<div class="color" style="float:left;">
							<span class="col_name">{{$k}}：</span>
							<ul class="color_tab">
								{{foreach from="$v" key="$kk" value="$vv"}}
								<li>
									<div class="bg">
										<p addprice="{{$vv['addprice']}}" gaid="{{$vv['gaid']}}" gid="{{$vv['goods_gid']}}">{{$vv['gavalue']}}</p>
										<div></div>
									</div>
								</li>
								{{endforeach}}
							</ul>
							<div class="shop_tips"><span></span><p>请选择您要购买的商品{{$k}} </p></div>
						</div>
						{{endforeach}}

						
						<div class="num">
							数量：
							<select name="">
								
							</select>
							<span>余量有限</span>
						</div>
						<div class="select">
							已选：
							<span class="s_color"></span>，
							<span class="s_size"></span>
							<span class="s_total"></span>
						</div>
						<div class="shoppingBuy">
							<a href="javascript:;" class="buy">立即购买</a>
							<a href="javascript:;" class="car"></a>
						</div>

					<!-- 立即购买 -->
					<script type="text/javascript">
						$(function(){
							$('.buy').click(function() {
								// 声明数组
								var shopgoods = {'id':'','num':0,'options':{}}

								// 判断规格是否选择完全
								var y = 1;
								$.each($('.color'), function(k, v) {
									// 判断提示框
									var x = $(this).find('.index').index();
									if(x<0){
										$(this).find('.shop_tips').css('display', 'block');
										y = 0;
									}
								// 添加规格
								shopgoods.options[$(this).find('.index .bg p').attr('gaid')] = $(this).find('.index .bg p').text();
								});
								// 规格选择不全  div显示
								if(y==0) return;

								// 添加其他属性
								shopgoods.id = $('.color .bg p').attr('gid');
								shopgoods.num = $('.num select').val();
								// shopgoods.options['pic'] =  
								// console.log(shopgoods);
								// 发送异步
								$.ajax({
									url: '{{U('ajaxGoods')}}',
									type: 'POST',
									dataType: 'json',
									data: {shopgoods: shopgoods},
									success:function(arr){
										if(arr){
											window.location.href='{{U('Car/index')}}';
										}
									}
								})
							});
						})
					</script>

					<!-- 弹窗 控制弹窗显隐    以及发送异步存入session-->
					<script type="text/javascript">
						$(function(){
							$('.car').click(function(){
								// 声明数组
								var shopgoods = {'id':'','num':0,'options':{}}

								// 判断规格是否选择完全
								var y = 1;
								$.each($('.color'), function(k, v) {
									// 判断提示框
									var x = $(this).find('.index').index();
									if(x<0){
										$(this).find('.shop_tips').css('display', 'block');
										y = 0;
									}
									// 添加规格
									shopgoods.options[$(this).find('.index .bg p').attr('gaid')] = $(this).find('.index .bg p').text();
								});
								// 规格选择不全  div显示
								if(y==0) return;

								// 添加其他属性
								shopgoods.id = $('.color .bg p').attr('gid');
								shopgoods.num = $('.num select').val();
								// shopgoods.options['pic'] =  
								// console.log(shopgoods);
								// 发送异步
								$.ajax({
									url: '{{U('ajaxGoods')}}',
									type: 'POST',
									dataType: 'json',
									data: {shopgoods: shopgoods},
									success:function(arr){
										// console.log(arr);
										$('.popup .total-pic .shop_num').html(arr.total_rows);
										$('.popup .total-pic .shop_price').html(arr.total);
										// 弹窗显示
										$('.popup').css('display', 'block');
									}
								})


								// 弹窗中的标题
								var title = $('#shopping .middle h2').text();
								$('.popup p').html(title);
							})
							$('.gwc-close,.guang').click(function(){
								// 弹窗隐藏
								$('.popup').css('display', 'none');
							})
						})
					</script>
						<div class="popup">
							<div class="sign"></div>
							<p></p>
							<div class="add-success">成功加入购物车!</div>
							<div class="total-pic">
								购物车中共<span class="shop_num"></span>  件商品，金额合计 
								￥<span style="font-size:20px;font-weight:700;" class="shop_price"></span>
							</div>
							<div class="pro-bottom">
								<a href="javascript:;" class="guang"><< 继续逛逛</a>
								<a href="{{U('Car/index')}}" class="jiesuan">去购物车 >></a>
							</div>
							<a href="javascript:;" class="gwc-close" title="关闭"></a>
						</div>
						<!-- 弹窗end -->
					</div>
				</div>
			</div>
		</div>
		
		
			<!--温馨提示-->
		<!-- <div id="tips">
			温馨提示: [售后服务]该商品属于特殊商品，不支持7天无理由退换货。 
		</div> -->
			<!--商品详情-->
		<div id="description">
			<h3>产品描述：</h3>
			<p>高端正装衬衫。原料使用新疆阿瓦提长绒棉。面料为中国面料制造商盛泰集团打造的300支四股面料，代表当今中国棉纺较高工艺。成衣缝制由日本衬衫专家吉国武先生监制，代表日本较高衬衫缝制工艺。 </p>
			<h3>产品属性：(点击属性可查看同类商品)</h3>
			<ul>
				{{foreach from="$attr" key="$k" value="$v"}}
				<li title="点击查看同类商品">
					<span>{{$v['taname']}}：</span>
					<a href="javascript:;">{{$v['gavalue']}}</a>
				</li>
				{{endforeach}}
			</ul>
			<h3>洗涤说明</h3>
			<div class="washing">
				<img src="{{__PUBLIC__}}/Home/images/Image 1.jpg"/>
			</div>
			<h3>详情图片：</h3>
			<h3 style="font-weight: normal;margin: 0;"> 注： 商品实际颜色以静物图为准 </h3>
			<div class="shop_pic">
				{{$goodsData['intro']}}
			</div>
			<h3>售后服务：</h3>
			<div class="shop_pic">
				{{$goodsData['service']}}
				
			</div>
		</div>
		<!--详情部分结束-->
		
		
		<!--评论区域-->
		<div id="comment">
			<div class="hot">
				<h2>热销产品</h2>
				<ul>
					<li>
						<img src="{{__PUBLIC__}}/Home/images/6373571-1j201511061140350380.jpg"/>
						<a href="">凡客羽绒服 匈牙利鹅绒 男款 黑色</a>
						<p>售价￥999</p>
					</li>
					<li>
						<img src="{{__PUBLIC__}}/Home/images/6373571-1j201511061140350380.jpg"/>
						<a href="">凡客羽绒服 匈牙利鹅绒 男款 黑色</a>
						<p>售价￥999</p>
					</li>
					
				</ul>
			</div>
			<div class="comment">
				<h2>最新评论(共2条)</h2>
				<div class="pl"><span>我要评论</span></div>
				<ul>
					<li>
						<div class="left">
							<p class="content">质量很好很舒适</p>
							<p class="time">2015/12/28 12:30:10</p>
						</div>
						<div class="middle">
							<span>颜色：白色</span>
							<span>尺码：39</span>
							<span>身高：0cm</span>
							<span>体重：0.0kg</span>
							<span><尺码合适></span>
						</div>
						<div class="right">
							<a href="">1381*****82</a>
							<p><span></span></p>
						</div>
					</li>
					<li>
						<div class="left">
							<p class="content">质量很好很舒适</p>
							<p class="time">2015/12/28 12:30:10</p>
						</div>
						<div class="middle">
							<span>颜色：白色</span>
							<span>尺码：39</span>
							<span>身高：0cm</span>
							<span>体重：0.0kg</span>
							<span><尺码合适></span>
						</div>
						<div class="right">
							<a href="">1381*****82</a>
							<p><span></span></p>
						</div>
					</li>
				</ul>
			</div>
			<!--<div class="question">
				
			</div>-->
		</div>
		
		
		<!--评论区域结束-->
		{{include file="VIEW_PATH/Common/footer.php"}}		
	</body>
</html>
